<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徐理念Blog - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!--    <style>-->
<!--        /* 头部固定样式 */-->
<!--        .blog-header {-->
<!--            position: fixed;-->
<!--            top: 0;-->
<!--            left: 0;-->
<!--            right: 0;-->
<!--            z-index: 1000;-->
<!--            background-color: #fff;-->
<!--            box-shadow: 0 2px 4px rgba(0,0,0,.1);-->
<!--            padding: 15px 0;-->
<!--        }-->
<!--        -->
<!--        /* 主内容区域样式 */-->
<!--        .main-content {-->
<!--            margin-top: 80px; /* 避开固定头部 */-->
<!--            min-height: calc(100vh - 160px); /* 留出头部和底部空间 */-->
<!--        }-->
<!--        -->
<!--        /* 底部样式 */-->
<!--        .blog-footer {-->
<!--            background-color: #f8f9fa;-->
<!--            padding: 30px 0;-->
<!--            margin-top: 20px;-->
<!--        }-->
<!--        -->
<!--        /* 导航链接样式 */-->
<!--        .nav-link {-->
<!--            font-weight: 500;-->
<!--            color: #495057;-->
<!--        }-->
<!--        -->
<!--        .nav-link:hover {-->
<!--            color: #0d6efd;-->
<!--        }-->
<!--        -->
<!--        /* 用户信息区域样式 */-->
<!--        .user-info {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--        }-->
<!--        -->
<!--        .user-avatar {-->
<!--            width: 32px;-->
<!--            height: 32px;-->
<!--            border-radius: 50%;-->
<!--            background-color: #0d6efd;-->
<!--            color: white;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            font-weight: bold;-->
<!--            margin-right: 8px;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
    <!-- 头部区域 -->
    <header class="blog-header">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <!-- 左侧标题 -->
                <div class="blog-title">
                    <h3 class="mb-0">徐理念Blog</h3>
                </div>

                <!-- 中间导航链接 -->
                <nav class="d-none d-md-block">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                        </li>

                    </ul>
                </nav>

                <!-- 右侧用户信息 -->
                <div class="user-info">
                    <div class="dropdown">
                        <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                           href="#" role="button" data-bs-toggle="dropdown">
                            <div class="user-avatar" th:text="用户">U</div>
                            <span class="d-none d-md-inline" th:text="${admin?.username}">用户名</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                            <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 移动端导航菜单 -->
            <div class="d-md-none mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                            <a href="/articles" class="btn btn-outline-primary"><i class="bi bi-card-text"></i> 全部动态</a>
                            <a href="/categories" class="btn btn-outline-primary"><i class="bi bi-folder"></i> 分类</a>
                            <a href="/tagList" class="btn btn-outline-primary"><i class="bi bi-tags"></i> 标签</a>
                            <a href="/articleManage" class="btn btn-outline-primary"><i class="bi bi-pencil-square"></i> 文章管理</a>

                        </div>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="mb-0">欢迎来到徐理念Blog</h4>
                        </div>

                        <div class="text-center my-4">
                            <img src="/images/touxiang.jpg"
                                 alt="用户头像"
                                 class="rounded-circle border border-3 border-primary shadow-sm"                     style="width: 150px; height: 150px; object-fit: cover;">
                            <div class="mt-3">
                                <h5 class="mb-1" th:text="xulinian">用户名</h5>
                                <p class="text-muted">欢迎回来！</p>
                            </div>
                        </div>

                        <div class="card-body">
<!--                            <p>这是您的个人博客首页，在这里您可以：</p>-->
                            <ul>
                                <li>查看最新的文章动态</li>
                                <li>管理您的博客内容</li>
                                <li>查看访客统计数据</li>
                                <li>设置个人博客信息</li>
                            </ul>

                            <!-- 示例内容 -->
                            <div class="row mt-4">
                                <div class="col-md-6 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">最新文章</h5>
                                            <p class="card-text">您最近发布的文章会显示在这里。</p>
                                            <a href="/articleList" class="btn btn-primary btn-sm">查看所有文章</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">统计数据</h5>
                                            <p class="card-text">您的博客访问量、点赞数等统计数据。</p>
                                            <a href="/statistics" class="btn btn-success btn-sm">查看详情</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部区域 -->
    <footer class="blog-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>联系我</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fab fa-qq me-2"></i>
                            <strong>QQ:</strong> <span>123456789</span>
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-envelope me-2"></i>
                            <strong>Email:</strong> <span>example@example.com</span>
                        </li>
                        <li>
                            <i class="bi bi-chat-dots me-2"></i>
                            <strong>微信:</strong> <span>xuln_blog</span>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>关于博客</h5>
                    <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
                </div>
                <div class="col-md-4">
                    <h5>友情链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-decoration-none">GitHub</a></li>
                        <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                        <li><a href="#" class="text-decoration-none">掘金</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
